import { t } from 'i18next'
import React, { FC, useState } from 'react'
import { IconReturnArrow } from '../../../components'
import { Wrap } from './style'
import { MeetingName } from './MeetingName'
import { Select, Search, Trigger } from '@kedacom/react-next'
import ShareModal from '@/components/ShareModal'
import { useStore as useShareModalStore } from '@/components/ShareModal/store'
import { useDebounceEffect } from 'ahooks'
import { useParamsStore } from '../store'
import shallow from 'zustand/shallow'
import { useMccStore } from '@/pages/manager/store'
import PopupMeetingWin from '@/pages/index/ManageList/MeetingCard/PopupWin'
import { fetchGetPlatformServiceUrl } from '@/api/global'
import { useGlobalStore } from '@/store/global'

interface ISortType {
	id: 1 | 2 | 3
	name: string
}
const SORT_TYPE: ISortType[] = [
	{
		id: 1,
		name: t('呼叫顺序'),
	},
	{
		id: 2,
		name: t('在离线顺序'),
	},
	{
		id: 3,
		name: t('组织架构'),
	},
]

export const MainTop: FC = () => {
	const updateShareModal = useShareModalStore((state) => state.update)
	const SWITCH = useGlobalStore((state) => state.SWITCH)

	const { update, tableSort, showSearch } = useParamsStore((state) => {
		const { tableSort, currentTab, currentOrgId } = state
		const showSearch = !((currentTab === 'live' && tableSort !== 3) || (tableSort === 3 && currentOrgId === 'live'))
		return {
			tableSort,
			showSearch,
			update: state.update,
		}
	}, shallow)
	const [searchVal, setSearchVal] = useState('')
	const handleSelect = (id: ISortType['id']) => {
		update({ tableSort: id })
	}
	const handleSearch = (val: string) => {
		setSearchVal(val)
	}
	useDebounceEffect(
		() => {
			update({ keywords: searchVal })
		},
		[searchVal],
		{
			wait: 250,
		}
	)
	const handleBack = () => {
		fetchGetPlatformServiceUrl()
			.then((data) => {
				window.location.href = data + '/index.html'
			})
			.catch((err) => {
				window.location.href = '/meeting/index.html'
			})
	}
	const handleShare = async () => {
		const { subject, startTime, e164, meetingMoid, duration } = useMccStore.getState().mccInfo
		updateShareModal({
			meetingInfo: {
				name: subject,
				startTime,
				e164,
				meetingMoid,
				duration,
			},
			type: 'meeting',
			open: true,
		})
	}
	return (
		<Wrap>
			<ShareModal />
			<div className="wrap-left">
				<IconReturnArrow className="back" onClick={handleBack} />
				<MeetingName className="meeting-name" />
				<Trigger
					popup={
						<PopupMeetingWin
							meetingMoid={useMccStore.getState().mccInfo.meetingMoid}
							style={{ boxSizing: 'border-box' }}
						/>
					}
					popupAlign={{
						points: ['bl', 'tl'],
					}}
				>
					<span className="meeting-desc">{t('详情')}</span>
				</Trigger>
				{!!SWITCH.share && (
					<span className="meeting-share" onClick={handleShare}>
						{t('分享')}
					</span>
				)}
			</div>
			<div className="wrap-right">
				<Select
					className="wrap-right__select"
					panelClassName="manager-top-select-panel__i18n"
					width={90}
					value={tableSort}
					valueField="id"
					labelField="name"
					onChange={(e, id) => handleSelect(id)}
					options={SORT_TYPE}
				/>
				{showSearch && (
					<Search
						maxLength={128}
						width={150}
						// className="wrap-right__search"
						iconAlign="left"
						onChange={(e, s) => handleSearch(s)}
						onClear={() => handleSearch('')}
						value={searchVal}
						clearable
						placeholder={t('搜索与会方')}
					/>
				)}
			</div>
		</Wrap>
	)
}
